<script setup lang="ts">
import { computed } from 'vue'
import SparkMD5 from 'spark-md5'

defineOptions({
  name: 'ColoredTagComponent'
})

const props = defineProps({
  text: {
    type: String,
    required: true
  }
})

const computedColor = computed(() => {
  if (!props.text) return '#000000'

  // 计算 MD5
  const hash = SparkMD5.hash(props.text)
  
  // 取前6位作为颜色
  const color = hash.slice(0, 6)

  return `#${color}`
})
</script>

<template>
  <t-tag :color="computedColor">
    <slot>{{ text }}</slot>
  </t-tag>
</template>
